import React, { useState, useEffect } from "react";
import { Navigate } from "react-router-dom";

// 定义 Props 类型
interface PrivateRouteProps {
  children: React.ReactElement; // 需要保护的子组件
}

// 路由守卫组件
const PrivateRoute: React.FC<PrivateRouteProps> = ({ children }) => {
  // 用于控制重定向的状态
  const [redirect, setRedirect] = useState<boolean>(false);

  useEffect(() => {
    const token = localStorage.getItem("token");
    if (!token) {
      // 如果没有 token，更新重定向状态
      setRedirect(true);
    }
  }, []);  // 空数组，表示只在首次渲染时执行

  if (redirect) {
    // 如果需要重定向，返回 <Navigate />
    return <Navigate to="/app/login" replace />;
  }

  // 如果有 token，则正常渲染子组件
  return children;
};

export default PrivateRoute;
